<template>
	<uv-popup ref="popup" mode="bottom" bgColor="#F3F4F5" :custom-style="{height: '100vh'}" @change="change">
		<!-- <view class="flex align-center justify-between padding bg-white">
			<text class="text-green">选择地址</text>
			<text class="cuIcon-close text-green" @click="close"></text>
		</view> -->
		<view class="flex flex-direction">

			<view class="po-r">
				<map id="myMap" style="width: 100%; height: 600rpx;" :markers="covers" :latitude="latitude"
					:longitude="longitude" :show-location="true" @tap="onRegionchange"></map>
			</view>
			<view class="flex-sub bg-white flex flex-direction">
				<view class="flex justify-between padding-lr padding-top-sm">
					<text class="text-red" @click="close">取消</text>
					<text class="text-green" @click="handleConfirm">确定</text>
				</view>
				<view class="padding-sm">
					<uv-input v-model="searchText" placeholder="请输入关键词">
						<template v-slot:suffix>
							<uv-button @click="mapSearch" text="搜索" type="success" size="mini"></uv-button>
						</template>
					</uv-input>
				</view>
				<view class="flex-sub">
					<uv-list :customStyle="{'max-height': '320px','overflow-y': 'auto'}">
						<uv-list-item v-for="(item, index) in locationList" :clickable="true" :key="index"
							:title="item.title" :note="item.address" :border="true" @click="chooseAddr(item)">
							<template v-slot:footer>
								<label class="radio">
									<radio :checked="checked.id== item.id" value="1" />
								</label>
							</template>
						</uv-list-item>
					</uv-list>
					<!-- <view class="flex" v-for="(item, index) in locationList" :key="index">
					<view class="flex-sub">
						{{item.title}}
						<view class="">
							{{item.address}}
						</view>
					</view>
					<label class="radio">
													<radio :checked="checked" value="1" />
												</label>
				</view> -->
				</view>
			</view>
		</view>
	</uv-popup>
</template>
<script>
	import QQMapWX from '@/static/js/qqmap-wx-jssdk.min.js';

	var self, mapCtx
	var qqmapsdk

	export default {
		data() {
			return {
				searchText: '',
				checked: {},
				latitude: '',
				longitude: '',
				covers: [],
				locationList: []
			}
		},
		created() {
			// lng: 108.31343
			// lat: 22.83393
			this.latitude = this.$hd.position.lat //22.83393
			this.longitude = this.$hd.position.lng //108.31343
			this.covers = [{
				id: 99,
				latitude: this.$hd.position.lat,
				longitude: this.$hd.position.lng,
				width: 20,
				height: 30
			}]
			self = this
			mapCtx = uni.createMapContext('myMap', self)
			qqmapsdk = new QQMapWX({
				key: '4CCBZ-RUDCB-Q4GUJ-NZXBJ-4GVQ7-OFFEY' //'4CCBZ-RUDCB-Q4GUJ-NZXBJ-4GVQ7-OFFEY'
			})
			this.loadAddrOpt()
		},
		mounted() {

		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			change(e) {
				console.log('弹窗状态改变：', e);
			},
			getCode() {},
			loadAddrOpt() {
				// 获取当前map
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: self.latitude,
						longitude: self.longitude
					},
					get_poi: 1,
					poi_options: 'policy=2;radius=3000;page_size=20;page_index=1',
					success: ({
						result
					}) => {
						console.log('success res', result)
						self.locationList = result.pois
					},
					fail: (err) => {
						console.log('err', err)
					}
				})
			},
			chooseAddr(item) {
				console.log(item)
				this.checked = item
				mapCtx.moveToLocation({
					latitude: item.location.lat,
					longitude: item.location.lng,
				})
				mapCtx.translateMarker({
					markerId: 99,
					// autoRotate: true,
					duration: 100,
					destination: {
						latitude: item.location.lat,
						longitude: item.location.lng,
					},
				})
			},
			onRegionchange(data) {
				this.checked = {}
				self.latitude = data.detail.latitude
				self.longitude = data.detail.longitude
				mapCtx.moveToLocation(data.detail)
				mapCtx.translateMarker({
					markerId: 99,
					// autoRotate: true,
					duration: 100,
					destination: data.detail
				})
				this.loadAddrOpt()
				// if(data.type == 'end') {
				// 	mapCtx.moveToLocation(data.detail)
				// }
			},
			mapSearch() {
				if (!this.searchText) return
				this.checked = {}
				qqmapsdk.search({
					keyword: this.searchText, //搜索关键词
					location: self.latitude + ',' + self.longitude, //设置周边搜索中心点
					success: function(res) {
						self.locationList = res.data
					},
					fail: function(res) {

					}
				});
			},
			handleConfirm() {
				if (!this.checked.id) return uni.showToast({
					title: '请选择一个地址！'
				})
				this.$emit('selectedAddr', this.checked)
				this.close()
			}
		}
	}
</script>

<style scoped>
	.po-r {
		position: relative;
	}

	.cancel-l {
		position: absolute;
		bottom: 10px;
		left: 10px;
	}

	.cancel-l {
		position: absolute;
		bottom: 10px;
		right: 10px;
	}
</style>